<template>
  <div>
    chart list
    <ChartDetail :option="option"/>
    <br>
    <button type="button" name="button" @click="random">random</button>
    <button type="button" name="button" @click="clear">clear</button>
  </div>
</template>
<script>
import ChartDetail from './chartDetail'

export default {
  name: "",
  data: () => ({
    option: {
      list: [],
      color: ''
    }
  }),
  methods: {
    random() {
      this.option.list.push({
        name: Math.random() * 2
      })
    },
    clear() {
      this.option.list = []
    }
  },
  created() {
    setTimeout(() => {
      this.option.color = 'red'
      this.option.list.push({
        name: '1'
      })
    }, 500)
  },
  components: {
    ChartDetail
  }
}
</script>
<style lang="scss" scoped>
</style>
